<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/css/index.css" />
    <style>
        .cue{
            display: inline-block;
            position: relative;
            top:20px;
            /*border: #ddebf0 1px solid;*/
            width: 33%;
            height: 4rem;
            padding: 2px;
            margin: 1px;
            /*background-color: #2761c3;*/
        }
        .center_box_1 {
            background-color: rgba(0, 0, 0, 0); /* 透明背景 */
            height: 7.94rem;
        }
        /* 共享的按钮样式 */
        .button-container {
            display: flex;
            justify-content: space-between;
            width: 60%;
            margin: auto;
            margin-top: 20px;
        }

        .play-button {
            /* 按钮的样式 */
            position: relative;
            width: 11em;
            height: 4em;
            outline: none;
            transition: 0.1s;
            background-color: transparent;
            border: none;
            font-size: 13px;
            font-weight: bold;
            color: #ddebf0;
        }

        .clip {
            /* 剪辑区域的样式 */
            --color: #2761c3;
            position: absolute;
            top: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
            border: 5px double var(--color);
            box-shadow: inset 0px 0px 15px #195480;
            -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        }

        .arrow {
            /* 箭头的样式 */
            position: absolute;
            transition: 0.2s;
            background-color: #2761c3;
            top: 35%;
            width: 11%;
            height: 30%;
        }

        .left-arrow {
            left: -13.5%;
            -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
        }

        .right-arrow {
            -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
            left: 102%;
        }

        .button-container button:hover .right-arrow {
            background-color: #27c39f;
            left: -15%;
            animation: 0.6s ease-in-out both infinite alternate rightArrow8;
        }

        .button-container button:hover .left-arrow {
            background-color: #27c39f;
            left: 103%;
            animation: 0.6s ease-in-out both infinite alternate leftArrow8;
        }

        .corner {
            /* 角落的样式 */
            position: absolute;
            width: 4em;
            height: 4em;
            background-color: #2761c3;
            box-shadow: inset 1px 1px 8px #2781c3;
            transform: scale(1) rotate(45deg);
            transition: 0.2s;
        }

        .right-top {
            top: -1.98em;
            left: 91%;
        }

        .left-top {
            top: -1.96em;
            left: -3.0em;
        }

        .left-bottom {
            top: 2.10em;
            left: -2.15em;
        }

        .right-bottom {
            top: 45%;
            left: 88%;
        }

        .button-container button:hover .left-top {
            animation: 0.1s ease-in-out 0.05s both changeColor8,
            0.2s linear 0.4s both lightEffect8;
        }

        .button-container button:hover .right-top {
            animation: 0.1s ease-in-out 0.15s both changeColor8,
            0.2s linear 0.4s both lightEffect8;
        }

        .button-container button:hover .right-bottom {
            animation: 0.1s ease-in-out 0.25s both changeColor8,
            0.2s linear 0.4s both lightEffect8;
        }

        .button-container button:hover .left-bottom {
            animation: 0.1s ease-in-out 0.35s both changeColor8,
            0.2s linear 0.4s both lightEffect8;
        }

        .button-container button:hover .corner {
            transform: scale(1.25) rotate(45deg);
        }

        .button-container button:hover .clip {
            animation: 0.2s ease-in-out 0.55s both greenLight8;
            --color: #27c39f;
        }

        @keyframes changeColor8 {
            from {
                background-color: #2781c3;
            }
            to {
                background-color: #27c39f;
            }
        }

        @keyframes lightEffect8 {
            from {
                box-shadow: 1px 1px 5px #27c39f;
            }
            to {
                box-shadow: 0 0 2px #27c39f;
            }
        }

        @keyframes greenLight8 {
            from {
            }
            to {
                box-shadow: inset 0px 0px 32px #27c39f;
            }
        }

        @keyframes leftArrow8 {
            from {
                transform: translate(0px);
            }
            to {
                transform: translateX(10px);
            }
        }

        @keyframes rightArrow8 {
            from {
                transform: translate(0px);
            }
            to {
                transform: translateX(-10px);
            }
        }

    </style>
</head>

<body>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/flexible.js"></script> //自适应布局
<!--<script src="/js/index.js"></script>-->
<script src="/js/china.js"></script>
<script src="/js/myMap.js"></script>
<!--<script type="text/javascript" src="/js/cq_map.js"></script>-->

<header>
    <div class="button-container">
        <button class="play-button">
            P L A Y_1
            <div class="clip">
                <div class="corner left-top"></div>
                <div class="corner right-bottom"></div>
                <div class="corner right-top"></div>
                <div class="corner left-bottom"></div>
            </div>
            <span class="arrow right-arrow"></span>
            <span class="arrow left-arrow"></span>
        </button>

        <button class="play-button">
            P L A Y_2
            <div class="clip">
                <div class="corner left-top"></div>
                <div class="corner right-bottom"></div>
                <div class="corner right-top"></div>
                <div class="corner left-bottom"></div>
            </div>
            <span class="arrow right-arrow"></span>
            <span class="arrow left-arrow"></span>
        </button>

        <button class="play-button">
            P L A Y_3
            <div class="clip">
                <div class="corner left-top"></div>
                <div class="corner right-bottom"></div>
                <div class="corner right-top"></div>
                <div class="corner left-bottom"></div>
            </div>
            <span class="arrow right-arrow"></span>
            <span class="arrow left-arrow"></span>
        </button>

<!--        <button class="play-button">-->
<!--            P L A Y_4-->
<!--            <div class="clip">-->
<!--                <div class="corner left-top"></div>-->
<!--                <div class="corner right-bottom"></div>-->
<!--                <div class="corner right-top"></div>-->
<!--                <div class="corner left-bottom"></div>-->
<!--            </div>-->
<!--            <span class="arrow right-arrow"></span>-->
<!--            <span class="arrow left-arrow"></span>-->
<!--        </button>-->
    </div>
    <div class="showTime">当前时间：2020年3月17-0时54分14秒</div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</header>

<section class="mainbox">
    <div class="column">
        <div class="panel bar">
            <h2>
                天气情况
            </h2>
            <div class="chart" id="left_top_box">
                <div id="he-plugin-standard"></div>
                <script>
                    WIDGET = {
                        "CONFIG": {
                            "layout": "1",
                            "width": "350",
                            "height": "200",
                            "background": "5",
                            "dataColor": "FFFFFF",
                            "borderRadius": "5",
                            "city": "CN101040900",
                            "key": "9c184731f19f46b68954a0d320f332ed"
                        }
                    }
                </script>
                <script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>

            </div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line">
            <h2>产量变化 <a href="javascript:;">2019</a>
                <a href="javacript:;"> 2020</a></h2>
            <div class="chart" id="left_center_box"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
            <h2>总产量</h2>
            <div class="chart" id="left_low_box"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
    <div class="column">
        <div class="map">
            <div class="chart">

                <div class="panel pie center_box_1" id="center_box_1" >
                    <div class="chart"></div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel pie">
                    <h2>农业机械运行状态</h2>
                    <div class="chart" style="display: flex;justify-content: center">
                        <div class="cue" id="center_box_2_1"></div>
                        <div class="cue" id="center_box_2_2"></div>
                        <div class="cue" id="center_box_2_3"></div>
                    </div>
                    <div class="panel-footer"></div>
                </div>

            </div>

            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
        </div>

    </div>
    <div class="column">
        <div class="panel bar1">
            <h2>作物生长情况</h2>
            <div class="chart" id="right_top_box"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line1">
            <h2>农业机械运行状态</h2>
            <div class="chart" id="right_center_box"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie1">
            <h2>市场需求与价格趋势</h2>
            <div class="chart" id="right_low_box"></div>
            <div class="panel-footer"></div>
        </div>
    </div>

    <script>
        var myChart_center_box_1= echarts.init(document.getElementById('center_box_1'));

        var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v3/bound/500000_full.json";

        var colors = [
            [
                "#1DE9B6",
                "#F46E36",
                "#04B9FF",
                "#5DBD32",
                "#FFC809",
                "#FB95D5",
                "#BDA29A",
                "#6E7074",
                "#546570",
                "#C4CCD3",
            ],
            [
                "#37A2DA",
                "#67E0E3",
                "#32C5E9",
                "#9FE6B8",
                "#FFDB5C",
                "#FF9F7F",
                "#FB7293",
                "#E062AE",
                "#E690D1",
                "#E7BCF3",
                "#9D96F5",
                "#8378EA",
                "#8378EA",
            ],
            [
                "#DD6B66",
                "#759AA0",
                "#E69D87",
                "#8DC1A9",
                "#EA7E53",
                "#EEDD78",
                "#73A373",
                "#73B9BC",
                "#7289AB",
                "#91CA8C",
                "#F49F42",
            ],
        ];

        var colorIndex = 0;

        $(function () {
            var geoCoordMap = {
                // 北碚: [106.5, 29.81],
                // 城口: [108.6520475, 31.90676506],
                // 大足: [105.7692868, 29.65392091],
                // 垫江: [107.4004904, 30.24903189],
                // 丰都: [107.7461781, 29.91492542],
                // 奉节: [109.3758974, 30.98202119],
                // 合川: [106.2833096, 30.09766756],
                // 江北: [106.6214893, 29.64821182],
                // 江津: [106.2647885, 28.98483627],
                // 开州: [108.1818518, 31.29466521],
                南岸: [106.6379653, 29.47704825],
                南川: [107.1406799, 29.12047319],
                彭水: [108.2573507, 29.36444557],
                綦南: [106.8036647, 28.96872774],
                黔江: [108.7559876, 29.44290625],
                石柱: [108.2438988, 30.07512144],
                市区: [106.4377397, 29.52648606],
                铜梁: [106.0616035, 29.81036286],
                潼南: [105.811692, 30.13795513],
                万州: [108.0828876, 30.73353669],
                巫山: [109.8779184, 31.09568937],
                巫溪: [109.2970739, 31.48090521],
                武隆: [107.6831317, 29.36831708],
                秀山: [108.9997005, 28.49462861],
                永川: [105.8347961, 29.41042605],
                酉阳: [108.7911679, 28.88330557],
                云阳: [108.7533957, 30.96025875],
                长寿: [107.24, 29.95],
                忠县: [107.9279014, 30.33522658],
                川东: [107.3488646, 29.68233099],
            };

            var voltageLevel = ["土豆", "玉米", "小麦", "番薯", "水稻"];
            var mapData = [
                // [],
                // [],
                // [],
                // [],
                // [],
                // [],
                // [],
                // [],
                // [],
                // [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
                [],
            ];

            /*柱子Y名称*/
            var categoryData = [];
            var barData = [];
            for (var key in geoCoordMap) {
                categoryData.push(key);
                mapData[0].push({
                    year: 2014,
                    name: key,
                    value: randomNum(100, 300),
                });
                mapData[1].push({
                    year: 2015,
                    name: key,
                    value: randomNum(100, 300),
                });
                mapData[2].push({
                    year: 2016,
                    name: key,
                    value: randomNum(100, 300),
                });
                mapData[3].push({
                    year: 2017,
                    name: key,
                    value: randomNum(100, 300),
                });
                mapData[4].push({
                    year: 2018,
                    name: key,
                    value: randomNum(100, 300),
                });
                mapData[5].push({
                    year: 2019,
                    name: key,
                    value: randomNum(100, 300),
                });
            }
            for (var i = 0; i < mapData.length; i++) {
                barData.push([]);
                for (var j = 0; j < mapData[i].length; j++) {
                    barData[i].push(mapData[i][j].value);
                }
            }
            $.getJSON(uploadedDataURL, function (geoJson) {
                echarts.registerMap("xianyang3", geoJson);
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value),
                            });
                        }
                    }
                    return res;
                };

                var convertToLineData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];
                        var fromCoord = geoCoordMap[dataItem.name];
                        var toCoord = [106.55, 29.57]; //市区
                        if (fromCoord && toCoord) {
                            res.push([
                                {
                                    coord: fromCoord,
                                    value: dataItem.value,
                                },
                                {
                                    coord: toCoord,
                                },
                            ]);
                        }
                    }
                    return res;
                };

                optionXyMap01 = {
                    timeline: {
                        data: voltageLevel,
                        axisType: "category",
                        autoPlay: true,
                        playInterval: 3000,
                        left: "10%",
                        right: "10%",
                        bottom: "3%",
                        width: "80%",
                        //  height: null,
                        label: {
                            normal: {
                                textStyle: {
                                    color: "#ddd",
                                },
                            },
                            emphasis: {
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                        },
                        symbolSize: 10,
                        lineStyle: {
                            color: "#555",
                        },
                        checkpointStyle: {
                            borderColor: "#777",
                            borderWidth: 2,
                        },
                        controlStyle: {
                            showNextBtn: true,
                            showPrevBtn: true,
                            normal: {
                                color: "#666",
                                borderColor: "#666",
                            },
                            emphasis: {
                                color: "#aaa",
                                borderColor: "#aaa",
                            },
                        },
                    },
                    baseOption: {
                        animation: true,
                        animationDuration: 1000,
                        animationEasing: "cubicInOut",
                        animationDurationUpdate: 1000,
                        animationEasingUpdate: "cubicInOut",
                        grid: {
                            right: "1%",
                            top: "15%",
                            bottom: "10%",
                            width: "20%",
                        },
                        tooltip: {
                            trigger: "axis", // hover触发器
                            axisPointer: {
                                // 坐标轴指示器，坐标轴触发有效
                                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                                shadowStyle: {
                                    color: "rgba(150,150,150,0.1)", //hover颜色
                                },
                            },
                        },
                        geo: {
                            show: true,
                            map: "xianyang3",
                            roam: true,
                            zoom: 1,
                            center: [108.5, 30], //中心点
                            label: {
                                emphasis: {
                                    show: false,
                                },
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: "rgba(147, 235, 248, 1)",
                                    borderWidth: 1,
                                    areaColor: {
                                        type: "radial",
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.5,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                                            },
                                            {
                                                offset: 1,
                                                color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                                            },
                                        ],
                                        globalCoord: false, // 缺省为 false
                                    },
                                    // shadowColor: 'rgba(128, 217, 248, 1)',
                                    // shadowColor: 'rgba(255, 255, 255, 1)',
                                    // shadowOffsetX: -2,
                                    // shadowOffsetY: 2,
                                    // shadowBlur: 10
                                },
                                emphasis: {
                                    areaColor: "#389BB7",
                                    borderWidth: 0,
                                },
                            },
                        },
                    },
                    options: [],
                };
                for (var n = 0; n < voltageLevel.length; n++) {
                    optionXyMap01.options.push({
                        backgroundColor: "transparent",
                        title: [
                            {
                                text: "重庆农作物产量",
                                left: "center",
                                textStyle: {
                                    color: "#fff",
                                },
                            },
                            {
                                id: "statistic",
                                text: voltageLevel[n] + "产量",
                                left: "75%",
                                top: "8%",
                                textStyle: {
                                    color: "#fff",
                                    fontSize: 20,
                                },
                            },
                        ],
                        xAxis: {
                            type: "value",
                            scale: true,
                            position: "top",
                            min: 0,
                            boundaryGap: false,
                            splitLine: {
                                show: false,
                            },
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLabel: {
                                margin: 2,
                                textStyle: {
                                    color: "#aaa",
                                },
                                show: false, // 隐藏 x 轴刻度
                            },
                        },
                        yAxis: {
                            type: "category",
                            //  name: 'TOP 20',
                            nameGap: 16,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ddd",
                                },
                            },
                            axisTick: {
                                show: false,
                                lineStyle: {
                                    color: "#ddd",
                                },
                            },
                            axisLabel: {
                                interval: 0,
                                textStyle: {
                                    color: "#ddd",
                                },
                            },
                            data: categoryData,
                        },
                        series: [
                            {
                                //文字和标志
                                name: "light",
                                type: "scatter",
                                coordinateSystem: "geo",
                                data: convertData(mapData[n]),
                                symbolSize: function (val) {
                                    return val[2] / 10;
                                },
                                // label: {
                                //     normal: {
                                //         formatter: '{b}',
                                //         position: 'right',
                                //         show: true
                                //     },
                                //     emphasis: {
                                //         show: true
                                //     }
                                // },
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                    },
                                },
                            },
                            {
                                type: "map",
                                map: "xianyang3",
                                geoIndex: 0,
                                aspectScale: 0.75, //长宽比
                                showLegendSymbol: false, // 存在legend时显示
                                label: {
                                    normal: {
                                        show: false,
                                    },
                                    emphasis: {
                                        show: false,
                                        textStyle: {
                                            color: "#fff",
                                        },
                                    },
                                },
                                roam: true,
                                itemStyle: {
                                    normal: {
                                        areaColor: "#031525",
                                        borderColor: "#FFFFFF",
                                    },
                                    emphasis: {
                                        areaColor: "#2B91B7",
                                    },
                                },
                                animation: false,
                                data: mapData,
                            },
                            {
                                //  name: 'Top 5',
                                type: "effectScatter",
                                coordinateSystem: "geo",
                                data: convertData(
                                    mapData[n]
                                        .sort(function (a, b) {
                                            return b.value - a.value;
                                        })
                                        .slice(0, 20)
                                ),
                                symbolSize: function (val) {
                                    return val[2] / 100;
                                },
                                showEffectOn: "render",
                                rippleEffect: {
                                    brushType: "stroke",
                                },
                                hoverAnimation: true,
                                label: {
                                    normal: {
                                        formatter: "{b}",
                                        position: "right",
                                        show: true,
                                    },
                                },
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                        shadowBlur: 5,
                                        shadowColor: colors[colorIndex][n],
                                    },
                                },
                                zlevel: 1,
                            },
                            // {
                            //     type: 'lines',
                            //     zlevel: 2,
                            //     effect: {
                            //         show: true,
                            //         period: 4, //箭头指向速度，值越小速度越快
                            //         trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                            //         symbol: 'arrow', //箭头图标
                            //         symbolSize: 2, //图标大小
                            //     },
                            //     lineStyle: {
                            //         normal: {
                            //             color: colors[colorIndex][n],
                            //             width: 1, //尾迹线条宽度
                            //             opacity: 1, //尾迹线条透明度
                            //             curveness: .3 //尾迹线条曲直度
                            //         }
                            //     },
                            //     data: convertToLineData(mapData[n])
                            // },
                            {
                                zlevel: 1.5,
                                type: "bar",
                                symbol: "none",
                                itemStyle: {
                                    normal: {
                                        color: colors[colorIndex][n],
                                    },
                                },
                                data: barData[n],
                            },
                        ],
                    });
                }
                myChart_center_box_1.setOption(optionXyMap01);
            });
        });

        function randomNum(minNum, maxNum) {
            let res = null;
            switch (arguments.length) {
                case 1:
                    res = parseInt(Math.random() * minNum + 1, 10);
                    break;
                case 2:
                    res = parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                    break;
                default:
                    res = 0;
                    break;
            }
            return res;
        }

    </script>
    <script>
        // 实例化对象
        var myChart_center_box_2_1 = echarts.init(document.getElementById('center_box_2_1'));

        // 指定配置和数据

        var dataArr = 44;
        var colorSet = {
            color: "#468EFD",
        };
        option = {
            backgroundColor: "transparent",
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%",
            },

            series: [
                {
                    name: "内部进度条",
                    type: "gauge",
                    // center: ['20%', '50%'],
                    radius: "40%",

                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [dataArr / 100, colorSet.color],
                                [1, "#111F42"],
                            ],
                            width: 8,
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    itemStyle: {
                        show: false,
                    },
                    detail: {
                        formatter: function (value) {
                            if (value !== 0) {
                                var num = Math.round(value);
                                return parseInt(num).toFixed(0) + "℃";
                            } else {
                                return 0;
                            }
                        },
                        offsetCenter: [0, 82],
                        textStyle: {
                            padding: [0, 0, 0, 0],
                            fontSize: 18,
                            fontWeight: "700",
                            color: colorSet.color,
                        },
                    },
                    title: {
                        //标题
                        show: true,
                        offsetCenter: [0, 46], // x, y，单位px
                        textStyle: {
                            color: "#fff",
                            fontSize: 14, //表盘上的标题文字大小
                            fontWeight: 400,
                            fontFamily: "PingFangSC",
                        },
                    },
                    data: [
                        {
                            name: "温度",
                            value: dataArr,
                        },
                    ],
                    pointer: {
                        show: true,
                        length: "75%",
                        radius: "20%",
                        width: 10, //指针粗细
                    },
                    animationDuration: 4000,
                },
                {
                    name: "外部刻度",
                    type: "gauge",
                    //  center: ['20%', '50%'],
                    radius: "50%",
                    min: 0, //最小刻度
                    max: 100, //最大刻度
                    splitNumber: 10, //刻度数量
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: [[1, "rgba(0,0,0,0)"]],
                        },
                    }, //仪表盘轴线
                    axisLabel: {
                        show: true,
                        color: "#4d5bd1",
                        distance: 25,
                        formatter: function (v) {
                            switch (v + "") {
                                case "0":
                                    return "0";
                                case "10":
                                    return "10";
                                case "20":
                                    return "20";
                                case "30":
                                    return "30";
                                case "40":
                                    return "40";
                                case "50":
                                    return "50";
                                case "60":
                                    return "60";
                                case "70":
                                    return "70";
                                case "80":
                                    return "80";
                                case "90":
                                    return "90";
                                case "100":
                                    return "100";
                            }
                        },
                    }, //刻度标签。
                    axisTick: {
                        show: true,
                        splitNumber: 7,
                        lineStyle: {
                            color: colorSet.color, //用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: -8,
                    }, //刻度样式
                    splitLine: {
                        show: true,
                        length: -20,
                        lineStyle: {
                            color: colorSet.color, //用颜色渐变函数不起作用
                        },
                    }, //分隔线样式
                    detail: {
                        show: false,
                    },
                    pointer: {
                        show: false,
                    },
                },
            ],
        };

        // 把配置给实例对象
        myChart_center_box_2_1.setOption(option);
        window.addEventListener("resize", function() {
            myChart_center_box_2_1.resize();
        });
    </script>
    <script>
        // 实例化对象
        var myChart_center_box_2_2 = echarts.init(document.getElementById('center_box_2_2'));

        // 指定配置和数据

        var dataArr = 24;
        var colorSet = {
            color: "#468EFD",
        };
        option = {
            backgroundColor: "transparent",
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%",
            },

            series: [
                {
                    name: "内部进度条",
                    type: "gauge",
                    // center: ['20%', '50%'],
                    radius: "40%",

                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [dataArr / 100, colorSet.color],
                                [1, "#111F42"],
                            ],
                            width: 8,
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    itemStyle: {
                        show: false,
                    },
                    detail: {
                        formatter: function (value) {
                            if (value !== 0) {
                                var num = Math.round(value);
                                return parseInt(num).toFixed(0) + "℃";
                            } else {
                                return 0;
                            }
                        },
                        offsetCenter: [0, 82],
                        textStyle: {
                            padding: [0, 0, 0, 0],
                            fontSize: 18,
                            fontWeight: "700",
                            color: colorSet.color,
                        },
                    },
                    title: {
                        //标题
                        show: true,
                        offsetCenter: [0, 46], // x, y，单位px
                        textStyle: {
                            color: "#fff",
                            fontSize: 14, //表盘上的标题文字大小
                            fontWeight: 400,
                            fontFamily: "PingFangSC",
                        },
                    },
                    data: [
                        {
                            name: "温度",
                            value: dataArr,
                        },
                    ],
                    pointer: {
                        show: true,
                        length: "75%",
                        radius: "20%",
                        width: 10, //指针粗细
                    },
                    animationDuration: 4000,
                },
                {
                    name: "外部刻度",
                    type: "gauge",
                    //  center: ['20%', '50%'],
                    radius: "50%",
                    min: 0, //最小刻度
                    max: 100, //最大刻度
                    splitNumber: 10, //刻度数量
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: [[1, "rgba(0,0,0,0)"]],
                        },
                    }, //仪表盘轴线
                    axisLabel: {
                        show: true,
                        color: "#4d5bd1",
                        distance: 25,
                        formatter: function (v) {
                            switch (v + "") {
                                case "0":
                                    return "0";
                                case "10":
                                    return "10";
                                case "20":
                                    return "20";
                                case "30":
                                    return "30";
                                case "40":
                                    return "40";
                                case "50":
                                    return "50";
                                case "60":
                                    return "60";
                                case "70":
                                    return "70";
                                case "80":
                                    return "80";
                                case "90":
                                    return "90";
                                case "100":
                                    return "100";
                            }
                        },
                    }, //刻度标签。
                    axisTick: {
                        show: true,
                        splitNumber: 7,
                        lineStyle: {
                            color: colorSet.color, //用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: -8,
                    }, //刻度样式
                    splitLine: {
                        show: true,
                        length: -20,
                        lineStyle: {
                            color: colorSet.color, //用颜色渐变函数不起作用
                        },
                    }, //分隔线样式
                    detail: {
                        show: false,
                    },
                    pointer: {
                        show: false,
                    },
                },
            ],
        };

        // 把配置给实例对象
        myChart_center_box_2_2.setOption(option);
        window.addEventListener("resize", function() {
            myChart_center_box_2_2.resize();
        });
    </script>
    <script>
        // 实例化对象
        var myChart_center_box_2_3 = echarts.init(document.getElementById('center_box_2_3'));

        // 指定配置和数据

        var dataArr = 89;
        var colorSet = {
            color: "#468EFD",
        };
        option = {
            backgroundColor: "transparent",
            tooltip: {
                formatter: "{a} <br/>{b} : {c}%",
            },

            series: [
                {
                    name: "内部进度条",
                    type: "gauge",
                    // center: ['20%', '50%'],
                    radius: "40%",

                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [dataArr / 100, colorSet.color],
                                [1, "#111F42"],
                            ],
                            width: 8,
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    itemStyle: {
                        show: false,
                    },
                    detail: {
                        formatter: function (value) {
                            if (value !== 0) {
                                var num = Math.round(value);
                                return parseInt(num).toFixed(0) + "℃";
                            } else {
                                return 0;
                            }
                        },
                        offsetCenter: [0, 82],
                        textStyle: {
                            padding: [0, 0, 0, 0],
                            fontSize: 18,
                            fontWeight: "700",
                            color: colorSet.color,
                        },
                    },
                    title: {
                        //标题
                        show: true,
                        offsetCenter: [0, 46], // x, y，单位px
                        textStyle: {
                            color: "#fff",
                            fontSize: 14, //表盘上的标题文字大小
                            fontWeight: 400,
                            fontFamily: "PingFangSC",
                        },
                    },
                    data: [
                        {
                            name: "温度",
                            value: dataArr,
                        },
                    ],
                    pointer: {
                        show: true,
                        length: "75%",
                        radius: "20%",
                        width: 10, //指针粗细
                    },
                    animationDuration: 4000,
                },
                {
                    name: "外部刻度",
                    type: "gauge",
                    //  center: ['20%', '50%'],
                    radius: "50%",
                    min: 0, //最小刻度
                    max: 100, //最大刻度
                    splitNumber: 10, //刻度数量
                    startAngle: 225,
                    endAngle: -45,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: [[1, "rgba(0,0,0,0)"]],
                        },
                    }, //仪表盘轴线
                    axisLabel: {
                        show: true,
                        color: "#4d5bd1",
                        distance: 25,
                        formatter: function (v) {
                            switch (v + "") {
                                case "0":
                                    return "0";
                                case "10":
                                    return "10";
                                case "20":
                                    return "20";
                                case "30":
                                    return "30";
                                case "40":
                                    return "40";
                                case "50":
                                    return "50";
                                case "60":
                                    return "60";
                                case "70":
                                    return "70";
                                case "80":
                                    return "80";
                                case "90":
                                    return "90";
                                case "100":
                                    return "100";
                            }
                        },
                    }, //刻度标签。
                    axisTick: {
                        show: true,
                        splitNumber: 7,
                        lineStyle: {
                            color: colorSet.color, //用颜色渐变函数不起作用
                            width: 1,
                        },
                        length: -8,
                    }, //刻度样式
                    splitLine: {
                        show: true,
                        length: -20,
                        lineStyle: {
                            color: colorSet.color, //用颜色渐变函数不起作用
                        },
                    }, //分隔线样式
                    detail: {
                        show: false,
                    },
                    pointer: {
                        show: false,
                    },
                },
            ],
        };

        // 把配置给实例对象
        myChart_center_box_2_3.setOption(option);
        window.addEventListener("resize", function() {
            myChart_center_box_2_3.resize();
        });
    </script>
    <script>
        // 实例化对象
        var myChart_left_top_box = echarts.init(document.getElementById('left_center_box'));

        // 指定配置和数据
        var option = {
            color: ["#00f2f1", "#ed3f35"],
            tooltip: {
                // 通过坐标轴来触发
                trigger: "axis"
            },
            legend: {
                // 距离容器10%
                right: "10%",
                // 修饰图例文字的颜色
                textStyle: {
                    color: "#4c9bfd"
                }
                // 如果series 里面设置了name，此时图例组件的data可以省略
                // data: ["邮件营销", "联盟广告"]
            },
            grid: {
                top: "20%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                show: true,
                borderColor: "#012f4a",
                containLabel: true
            },

            xAxis: {
                type: "category",
                boundaryGap: false,
                data: [],
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                // 去除x坐标轴的颜色
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                type: "value",
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                // 修改y轴分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "#012f4a"
                    }
                }
            },
            series: [
                {
                    name: "月产量",
                    type: "line",
                    stack: "总量",
                    // 是否让线条圆滑显示
                    smooth: true,
                    data: [],
                },
                {
                    name: "月销售",
                    type: "line",
                    smooth: true,
                    data: [],
                }
            ]
        };


        var days_yue = [];
        var nums_yue = [];
        var days_z = [];
        var nums_z = [];
        $.ajax({
            type: "get",
            url: "/daydate/all", // 假设按照不同的type发送请求
            contentType: "application/json",
            success: function (res) {
                console.log("=====res: =======")
                console.log(res);
                for (var i = 0; i < res.length; i+=30) {
                    days_yue.push(res[i].day.slice(0, 10))
                    nums_yue.push(res[i].num);
                }
                for (var i = 10; i < res.length; i+=15) {
                    days_z.push(res[i].day.slice(0, 10))
                    nums_z.push(res[i].num);
                }
                myChart_left_top_box.setOption({
                    xAxis: {
                        data: days_yue
                    },
                    series: [
                        {
                            name: "月产量",
                            data: nums_yue // 根据按钮类型决定更新的数据
                        },
                        {
                            name: "月销售",
                            data: nums_z // 根据按钮类型决定更新的数据
                        },


                    ]
                });
            }
        });


        // 把配置给实例对象
        myChart_left_top_box.setOption(option);
        window.addEventListener("resize", function() {
            myChart_left_top_box.resize();
        });
    </script>
    <script>
        // 实例化对象
        var myChart_left_low_box = echarts.init(document.getElementById('left_low_box'));

        // 指定配置和数据
        option = {
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function(p) {
                    //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: "90%",
                itemWidth: 10,
                itemHeight: 10,
                data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },
            series: [
                {
                    name: "产量",
                    type: "pie",
                    center: ["50%", "42%"],
                    radius: ["40%", "60%"],
                    color: [
                        "#065aab",
                        "#066eab",
                        "#0682ab",
                        "#0696ab",
                        "#06a0ab",
                        "#06b4ab",
                        "#06c8ab",
                        "#06dcab",
                        "#06f0ab"
                    ],
                    label: { show: false },
                    labelLine: { show: false },
                    data: [
                        { value: 1, name: "0岁以下" },
                        { value: 4, name: "20-29岁" },
                        { value: 2, name: "30-39岁" },
                        { value: 2, name: "40-49岁" },
                        { value: 1, name: "50岁以上" }
                    ]
                }
            ]
        };

        var types_left_low_box = [];
        $.ajax({
            type: "get",
            url: "/crop_yield/all", // 假设按照不同的type发送请求
            contentType: "application/json",
            success: function (res) {
                console.log("=====left_low_box: =======")
                console.log(res);
                let datas_left_low_box = res.map(({ id, crop_type, yield }) => ({ name: crop_type, value: yield }));
                types_left_low_box = datas_left_low_box.map(item => item.name);
                // console.log(datas_left_low_box)
                myChart_left_low_box.setOption({
                    legend: {
                        data: types_left_low_box
                    },
                    series: [{
                        data: datas_left_low_box // 根据按钮类型决定更新的数据
                    }]
                });
            }
        });



        // 把配置给实例对象
        myChart_left_low_box.setOption(option);
        window.addEventListener("resize", function() {
            myChart_left_low_box.resize();
        });
    </script>
    <script>
        // 实例化对象
        var myChart = echarts.init(document.getElementById('right_top_box'));

        var data = [70, 34, 60];
        var titlename = ["生长状态", "生长速度", "叶面积指数"];
        var valdata = [702, 350, 610];
        var myColor = ["#1089E7", "#F57474", "#56D0E3"];
        option = {
            //图标位置
            grid: {
                top: "10%",
                left: "22%",
                bottom: "10%"
            },
            xAxis: {
                show: false
            },
            yAxis: [
                {
                    show: true,
                    data: titlename,
                    inverse: true,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: "#fff",

                        rich: {
                            lg: {
                                backgroundColor: "#339911",
                                color: "#fff",
                                borderRadius: 15,
                                // padding: 5,
                                align: "center",
                                width: 15,
                                height: 15
                            }
                        }
                    }
                },
                {
                    show: true,
                    inverse: true,
                    data: valdata,
                    axisLabel: {
                        textStyle: {
                            fontSize: 12,
                            color: "#fff"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "条",
                    type: "bar",
                    yAxisIndex: 0,
                    data: data,
                    barCategoryGap: 50,
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 20,
                            color: function(params) {
                                var num = myColor.length;
                                return myColor[params.dataIndex % num];
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "inside",
                            formatter: "{c}%"
                        }
                    }
                },
                {
                    name: "框",
                    type: "bar",
                    yAxisIndex: 1,
                    barCategoryGap: 50,
                    data: [100, 100, 100, 100, 100],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: "none",
                            borderColor: "#00c1de",
                            borderWidth: 3,
                            barBorderRadius: 15
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    </script>
    <script>
        // 实例化对象
        var myChart_center_low_box = echarts.init(document.getElementById('right_center_box'));

        var option = {
            tooltip: {
                trigger: "axis"
            },
            legend: {
                top: "0%",
                data: ["市场需求", "价格趋势"],
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },

            grid: {
                left: "10",
                top: "30",
                right: "10",
                bottom: "10",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    // x轴更换数据
                    data: [],
                    // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 12
                        }
                    },
                    // x轴线的颜色为   rgba(255,255,255,.2)
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.2)"
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisTick: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: 12
                        }
                    },
                    // 修改分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    name: "市场需求",
                    type: "line",
                    smooth: true,
                    // 单独修改当前线条的样式
                    lineStyle: {
                        color: "#0184d5",
                        width: "2"
                    },
                    // 填充颜色设置
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    },
                    // 设置拐点
                    symbol: "circle",
                    // 拐点大小
                    symbolSize: 8,
                    // 开始不显示拐点， 鼠标经过显示
                    showSymbol: false,
                    // 设置拐点颜色以及边框
                    itemStyle: {
                        color: "#0184d5",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    },
                    data: []
                },
                {
                    name: "价格趋势",
                    type: "line",
                    smooth: true,
                    lineStyle: {
                        normal: {
                            color: "#00d887",
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 216, 135, 0.4)"
                                    },
                                    {
                                        offset: 0.8,
                                        color: "rgba(0, 216, 135, 0.1)"
                                    }
                                ],
                                false
                            ),
                            shadowColor: "rgba(0, 0, 0, 0.1)"
                        }
                    },
                    // 设置拐点 小圆点
                    symbol: "circle",
                    // 拐点大小
                    symbolSize: 5,
                    // 设置拐点颜色以及边框
                    itemStyle: {
                        color: "#00d887",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    },
                    // 开始不显示拐点， 鼠标经过显示
                    showSymbol: false,
                    data: []
                }
            ]
        };


        var markets = []
        var prices = []
        var days_right_low_box = []
        $.ajax({
            type: "get",
            url: "/marker_price/all", // 假设按照不同的type发送请求
            contentType: "application/json",
            success: function (res) {
                console.log("=====myChart_right_low_box: =======")
                // console.log(res);
                var adas = 1
                for (var i = 0; i < res.length; i+=20) {
                    markets.push(res[i].market_demand);
                    prices.push(res[i].price_trends);
                    days_right_low_box.push(res[i].day.slice(0, 10));

                }
                console.log(markets,prices);
                myChart_center_low_box.setOption({
                    xAxis: {
                        data:days_right_low_box
                    },
                    series: [
                        {
                            name: "市场需求",
                            data: markets // 根据按钮类型决定更新的数据
                        },
                        {
                            name: "价格趋势",
                            data: prices // 根据按钮类型决定更新的数据
                        },


                    ]
                });
            }
        });
        myChart_center_low_box.setOption(option);
        // 4. 让图表跟随屏幕自动的去适应
        window.addEventListener("resize", function() {
            myChart_center_low_box.resize();
        });
    </script>
    <script>
        // 实例化对象
        var myChart_right_low_box = echarts.init(document.getElementById('right_low_box'));

        // 2. 指定配置项和数据
        var option = {
            legend: {
                top: "90%",
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: "rgba(255,255,255,.5)",
                    fontSize: "12"
                }
            },
            tooltip: {
                trigger: "item",
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            // 注意颜色写的位置
            color: [
                "#006cff",
                "#60cda0",
                "#ed8884",
                "#ff9f7f",
                "#0096ff",
                "#9fe6b8",
                "#32c5e9",
                "#1d9dff"
            ],
            series: [
                {
                    name: "点位统计",
                    type: "pie",
                    // 如果radius是百分比则必须加引号
                    radius: ["10%", "70%"],
                    center: ["50%", "42%"],
                    roseType: "radius",
                    data: [
                        { value: 20, name: "云南" },
                        { value: 26, name: "北京" },
                        { value: 24, name: "山东" },
                        { value: 25, name: "河北" },
                        { value: 20, name: "江苏" },
                        { value: 25, name: "浙江" },
                        { value: 30, name: "深圳" },
                        { value: 42, name: "广东" }
                    ],
                    // 修饰饼形图文字相关的样式 label对象
                    label: {
                        fontSize: 10
                    },
                    // 修饰引导线样式
                    labelLine: {
                        // 连接到图形的线长度
                        length: 10,
                        // 连接到文字的线长度
                        length2: 10
                    }
                }
            ]
        };

        // 3. 配置项和数据给我们的实例化对象
        myChart_right_low_box.setOption(option);
        // 4. 当我们浏览器缩放的时候，图表也等比例缩放
        window.addEventListener("resize", function() {
            // 让我们的图表调用 resize这个方法
            myChart_right_low_box.resize();
        });
    </script>
    <script>
        //点击事件
        // 获取所有按钮元素
        const buttons = document.querySelectorAll('.play-button');

        // 为每个按钮添加点击事件监听器
        buttons.forEach((button, index) => {
            button.addEventListener('click', () => {
                // 当按钮被点击时，执行对应的操作
                console.log(`Button ${index + 1} clicked!`);
                // 这里可以添加按钮被点击时的其他操作或逻辑
                if (index === 0) {
                    var days = [];
                    var nums = [];
                    $.ajax({
                        type: "get",
                        url: "/daydate/all", // 假设按照不同的type发送请求
                        contentType: "application/json",
                        success: function (res) {
                            console.log("=====res: =======")
                            console.log(res);
                            for (var i = 0; i < res.length; i+=30) {
                                days.push(res[i].day)
                                nums.push(res[i].num);
                            }
                            console.log(days,nums)
                            myChart_left_top_box.setOption({
                                xAxis: {
                                    data: days
                                },
                                series: [{
                                    type: 'line',
                                    data: nums // 根据按钮类型决定更新的数据
                                }]
                            });
                        }
                    });


                    var data = [70, 34, 60];
                    var titlename = ["生长状态", "生长速度", "叶面积指数"];
                    var valdata = [702, 350, 610];
                    var myColor = ["#1089E7", "#F57474", "#56D0E3"];
                    option = {
                        //图标位置
                        grid: {
                            top: "10%",
                            left: "22%",
                            bottom: "10%"
                        },
                        xAxis: {
                            show: false
                        },
                        yAxis: [
                            {
                                show: true,
                                data: titlename,
                                inverse: true,
                                axisLine: {
                                    show: false
                                },
                                splitLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    color: "#fff",

                                    rich: {
                                        lg: {
                                            backgroundColor: "#339911",
                                            color: "#fff",
                                            borderRadius: 15,
                                            // padding: 5,
                                            align: "center",
                                            width: 15,
                                            height: 15
                                        }
                                    }
                                }
                            },
                            {
                                show: true,
                                inverse: true,
                                data: valdata,
                                axisLabel: {
                                    textStyle: {
                                        fontSize: 12,
                                        color: "#fff"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "条",
                                type: "bar",
                                yAxisIndex: 0,
                                data: data,
                                barCategoryGap: 50,
                                barWidth: 10,
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: 20,
                                        color: function(params) {
                                            var num = myColor.length;
                                            return myColor[params.dataIndex % num];
                                        }
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: "inside",
                                        formatter: "{c}%"
                                    }
                                }
                            },
                            {
                                name: "框",
                                type: "bar",
                                yAxisIndex: 1,
                                barCategoryGap: 50,
                                data: [100, 100, 100, 100, 100],
                                barWidth: 15,
                                itemStyle: {
                                    normal: {
                                        color: "none",
                                        borderColor: "#00c1de",
                                        borderWidth: 3,
                                        barBorderRadius: 15
                                    }
                                }
                            }
                        ]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                    var option = {
                        tooltip: {
                            trigger: "axis"
                        },
                        legend: {
                            top: "0%",
                            data: ["市场需求", "价格趋势"],
                            textStyle: {
                                color: "rgba(255,255,255,.5)",
                                fontSize: "12"
                            }
                        },

                        grid: {
                            left: "10",
                            top: "30",
                            right: "10",
                            bottom: "10",
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: "category",
                                boundaryGap: false,
                                // x轴更换数据
                                data: [],
                                // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: 12
                                    }
                                },
                                // x轴线的颜色为   rgba(255,255,255,.2)
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.2)"
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: "value",
                                axisTick: { show: false },
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: 12
                                    }
                                },
                                // 修改分割线的颜色
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "市场需求",
                                type: "line",
                                smooth: true,
                                // 单独修改当前线条的样式
                                lineStyle: {
                                    color: "#0184d5",
                                    width: "2"
                                },
                                // 填充颜色设置
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                                            },
                                            {
                                                offset: 0.8,
                                                color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: "rgba(0, 0, 0, 0.1)"
                                },
                                // 设置拐点
                                symbol: "circle",
                                // 拐点大小
                                symbolSize: 8,
                                // 开始不显示拐点， 鼠标经过显示
                                showSymbol: false,
                                // 设置拐点颜色以及边框
                                itemStyle: {
                                    color: "#0184d5",
                                    borderColor: "rgba(221, 220, 107, .1)",
                                    borderWidth: 12
                                },
                                data: []
                            },
                            {
                                name: "价格趋势",
                                type: "line",
                                smooth: true,
                                lineStyle: {
                                    normal: {
                                        color: "#00d887",
                                        width: 2
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [
                                                {
                                                    offset: 0,
                                                    color: "rgba(0, 216, 135, 0.4)"
                                                },
                                                {
                                                    offset: 0.8,
                                                    color: "rgba(0, 216, 135, 0.1)"
                                                }
                                            ],
                                            false
                                        ),
                                        shadowColor: "rgba(0, 0, 0, 0.1)"
                                    }
                                },
                                // 设置拐点 小圆点
                                symbol: "circle",
                                // 拐点大小
                                symbolSize: 5,
                                // 设置拐点颜色以及边框
                                itemStyle: {
                                    color: "#00d887",
                                    borderColor: "rgba(221, 220, 107, .1)",
                                    borderWidth: 12
                                },
                                // 开始不显示拐点， 鼠标经过显示
                                showSymbol: false,
                                data: []
                            }
                        ]
                    };
                    var markets = []
                    var prices = []
                    var days_right_low_box = []
                    $.ajax({
                        type: "get",
                        url: "/marker_price/all", // 假设按照不同的type发送请求
                        contentType: "application/json",
                        success: function (res) {
                            console.log("=====myChart_right_low_box: =======")
                            // console.log(res);
                            var adas = 1
                            for (var i = 0; i < res.length; i+=20) {
                                markets.push(res[i].market_demand);
                                prices.push(res[i].price_trends);
                                days_right_low_box.push(res[i].day.slice(0, 10));

                            }
                            console.log(markets,prices);
                            myChart_center_low_box.setOption({
                                xAxis: {
                                    data:days_right_low_box
                                },
                                series: [
                                    {
                                        name: "市场需求",
                                        data: markets // 根据按钮类型决定更新的数据
                                    },
                                    {
                                        name: "价格趋势",
                                        data: prices // 根据按钮类型决定更新的数据
                                    },


                                ]
                            });
                        }
                    });
                    myChart_center_low_box.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
                    window.addEventListener("resize", function() {
                        myChart_center_low_box.resize();
                    });


                    var aboption = {
                        legend: {
                            top: "90%",
                            itemWidth: 10,
                            itemHeight: 10,
                            textStyle: {
                                color: "rgba(255,255,255,.5)",
                                fontSize: "12"
                            }
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        // 注意颜色写的位置
                        color: [
                            "#006cff",
                            "#60cda0",
                            "#ed8884",
                            "#ff9f7f",
                            "#0096ff",
                            "#9fe6b8",
                            "#32c5e9",
                            "#1d9dff"
                        ],
                        series: [
                            {
                                name: "点位统计",
                                type: "pie",
                                // 如果radius是百分比则必须加引号
                                radius: ["10%", "70%"],
                                center: ["50%", "42%"],
                                roseType: "radius",
                                data: [
                                    { value: 20, name: "云南" },
                                    { value: 26, name: "北京" },
                                    { value: 24, name: "山东" },
                                    { value: 25, name: "河北" },
                                    { value: 20, name: "江苏" },
                                    { value: 25, name: "浙江" },
                                    { value: 30, name: "深圳" },
                                    { value: 42, name: "广东" }
                                ],
                                // 修饰饼形图文字相关的样式 label对象
                                label: {
                                    fontSize: 10
                                },
                                // 修饰引导线样式
                                labelLine: {
                                    // 连接到图形的线长度
                                    length: 10,
                                    // 连接到文字的线长度
                                    length2: 10
                                }
                            }
                        ]
                    };

                    // 3. 配置项和数据给我们的实例化对象
                    myChart_right_low_box.setOption(aboption);
                }
                if (index === 1) {  //当点击button2时
                    var days = [];
                    var nums = [];
                    $.ajax({
                        type: "get",
                        url: "/daydate/all", // 假设按照不同的type发送请求
                        contentType: "application/json",
                        success: function (res) {
                            console.log("=====res: =======")
                            console.log(res);
                            for (var i = 0; i < res.length; i+=100) {
                                // var date = new Date(res[i].day);
                                // var formattedDate = date.toISOString().split('T')[0]; // 提取日期部分

                                // days.push(formattedDate);
                                days.push(res[i].day)
                                nums.push(res[i].num);
                            }
                            console.log(days,nums)
                            myChart_left_top_box.setOption({
                                xAxis: {
                                    data: days
                                },
                                series: [{
                                    type: 'line',
                                    data: nums // 根据按钮类型决定更新的数据
                                }]
                            });
                        }
                    });


                    var data = [20, 84, 90];
                    var titlename = ["购买状态", "卖出速度", "市场指数"];
                    var valdata = [702, 350, 610];
                    var myColor = ["#1089E7", "#F57474", "#56D0E3"];
                    option = {
                        //图标位置
                        grid: {
                            top: "10%",
                            left: "22%",
                            bottom: "10%"
                        },
                        xAxis: {
                            show: false
                        },
                        yAxis: [
                            {
                                show: true,
                                data: titlename,
                                inverse: true,
                                axisLine: {
                                    show: false
                                },
                                splitLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    color: "#fff",

                                    rich: {
                                        lg: {
                                            backgroundColor: "#339911",
                                            color: "#fff",
                                            borderRadius: 15,
                                            // padding: 5,
                                            align: "center",
                                            width: 15,
                                            height: 15
                                        }
                                    }
                                }
                            },
                            {
                                show: true,
                                inverse: true,
                                data: valdata,
                                axisLabel: {
                                    textStyle: {
                                        fontSize: 12,
                                        color: "#fff"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "条",
                                type: "bar",
                                yAxisIndex: 0,
                                data: data,
                                barCategoryGap: 50,
                                barWidth: 10,
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: 20,
                                        color: function(params) {
                                            var num = myColor.length;
                                            return myColor[params.dataIndex % num];
                                        }
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: "inside",
                                        formatter: "{c}%"
                                    }
                                }
                            },
                            {
                                name: "框",
                                type: "bar",
                                yAxisIndex: 1,
                                barCategoryGap: 50,
                                data: [100, 100, 100, 100, 100],
                                barWidth: 15,
                                itemStyle: {
                                    normal: {
                                        color: "none",
                                        borderColor: "#00c1de",
                                        borderWidth: 3,
                                        barBorderRadius: 15
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);


                    var option = {
                        tooltip: {
                            trigger: "axis"
                        },
                        legend: {
                            top: "0%",
                            data: ["市场需求", "价格趋势"],
                            textStyle: {
                                color: "rgba(255,255,255,.5)",
                                fontSize: "12"
                            }
                        },

                        grid: {
                            left: "10",
                            top: "30",
                            right: "10",
                            bottom: "10",
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: "category",
                                boundaryGap: false,
                                // x轴更换数据
                                data: [],
                                // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: 12
                                    }
                                },
                                // x轴线的颜色为   rgba(255,255,255,.2)
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.2)"
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: "value",
                                axisTick: { show: false },
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: 12
                                    }
                                },
                                // 修改分割线的颜色
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "市场需求",
                                type: "line",
                                smooth: true,
                                // 单独修改当前线条的样式
                                lineStyle: {
                                    color: "#0184d5",
                                    width: "2"
                                },
                                // 填充颜色设置
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                                            },
                                            {
                                                offset: 0.8,
                                                color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: "rgba(0, 0, 0, 0.1)"
                                },
                                // 设置拐点
                                symbol: "circle",
                                // 拐点大小
                                symbolSize: 8,
                                // 开始不显示拐点， 鼠标经过显示
                                showSymbol: false,
                                // 设置拐点颜色以及边框
                                itemStyle: {
                                    color: "#0184d5",
                                    borderColor: "rgba(221, 220, 107, .1)",
                                    borderWidth: 12
                                },
                                data: []
                            },
                            {
                                name: "价格趋势",
                                type: "line",
                                smooth: true,
                                lineStyle: {
                                    normal: {
                                        color: "#00d887",
                                        width: 2
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [
                                                {
                                                    offset: 0,
                                                    color: "rgba(0, 216, 135, 0.4)"
                                                },
                                                {
                                                    offset: 0.8,
                                                    color: "rgba(0, 216, 135, 0.1)"
                                                }
                                            ],
                                            false
                                        ),
                                        shadowColor: "rgba(0, 0, 0, 0.1)"
                                    }
                                },
                                // 设置拐点 小圆点
                                symbol: "circle",
                                // 拐点大小
                                symbolSize: 5,
                                // 设置拐点颜色以及边框
                                itemStyle: {
                                    color: "#00d887",
                                    borderColor: "rgba(221, 220, 107, .1)",
                                    borderWidth: 12
                                },
                                // 开始不显示拐点， 鼠标经过显示
                                showSymbol: false,
                                data: []
                            }
                        ]
                    };
                    var markets = []
                    var prices = []
                    var days_right_low_box = []
                    $.ajax({
                        type: "get",
                        url: "/marker_price/all", // 假设按照不同的type发送请求
                        contentType: "application/json",
                        success: function (res) {
                            console.log("=====myChart_right_low_box: =======")
                            // console.log(res);
                            var adas = 1
                            for (var i = 0; i < res.length; i+=30) {
                                markets.push(res[i].market_demand);
                                prices.push(res[i].price_trends);
                                days_right_low_box.push(res[i].day.slice(0, 10));

                            }
                            console.log(markets,prices);
                            myChart_center_low_box.setOption({
                                xAxis: {
                                    data:days_right_low_box
                                },
                                series: [
                                    {
                                        name: "市场需求",
                                        data: markets // 根据按钮类型决定更新的数据
                                    },
                                    {
                                        name: "价格趋势",
                                        data: prices // 根据按钮类型决定更新的数据
                                    },


                                ]
                            });
                        }
                    });
                    myChart_center_low_box.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
                    window.addEventListener("resize", function() {
                        myChart_center_low_box.resize();
                    });

                    var aboption = {
                        legend: {
                            top: "90%",
                            itemWidth: 10,
                            itemHeight: 10,
                            textStyle: {
                                color: "rgba(255,255,255,.5)",
                                fontSize: "12"
                            }
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        // 注意颜色写的位置
                        color: [
                            "#006cff",
                            "#60cda0",
                            "#ed8884",
                            "#ff9f7f",
                            "#0096ff",
                            "#9fe6b8",
                            "#32c5e9",
                            "#1d9dff"
                        ],
                        series: [
                            {
                                name: "点位统计",
                                type: "pie",
                                // 如果radius是百分比则必须加引号
                                radius: ["10%", "70%"],
                                center: ["50%", "42%"],
                                roseType: "radius",
                                data: [
                                    { value: 30, name: "云南" },
                                    { value: 76, name: "北京" },
                                    { value: 14, name: "山东" },
                                    { value: 15, name: "河北" },
                                    { value: 70, name: "江苏" },
                                    { value: 35, name: "浙江" },
                                    { value: 50, name: "深圳" },
                                    { value: 62, name: "广东" }
                                ],
                                // 修饰饼形图文字相关的样式 label对象
                                label: {
                                    fontSize: 10
                                },
                                // 修饰引导线样式
                                labelLine: {
                                    // 连接到图形的线长度
                                    length: 10,
                                    // 连接到文字的线长度
                                    length2: 10
                                }
                            }
                        ]
                    };

                    // 3. 配置项和数据给我们的实例化对象
                    myChart_right_low_box.setOption(aboption);
                }
                if (index === 2) {
                    var days = [];
                    var nums = [];
                    $.ajax({
                        type: "get",
                        url: "/daydate/all", // 假设按照不同的type发送请求
                        contentType: "application/json",
                        success: function (res) {
                            console.log("=====res: =======")
                            console.log(res);
                            for (var i = 0; i < res.length; i+=90) {
                                // var date = new Date(res[i].day);
                                // var formattedDate = date.toISOString().split('T')[0]; // 提取日期部分

                                // days.push(formattedDate);
                                days.push(res[i].day)
                                nums.push(res[i].num);
                            }
                            console.log(days,nums)
                            myChart_left_top_box.setOption({
                                xAxis: {
                                    data: days
                                },
                                series: [{
                                    type: 'line',
                                    data: nums // 根据按钮类型决定更新的数据
                                }]
                            });
                        }
                    });

                    var data = [10, 34, 50];
                    var titlename = ["状态", "速度", "指数"];
                    var valdata = [702, 350, 610];
                    var myColor = ["#1089E7", "#F57474", "#56D0E3"];
                    option = {
                        //图标位置
                        grid: {
                            top: "10%",
                            left: "22%",
                            bottom: "10%"
                        },
                        xAxis: {
                            show: false
                        },
                        yAxis: [
                            {
                                show: true,
                                data: titlename,
                                inverse: true,
                                axisLine: {
                                    show: false
                                },
                                splitLine: {
                                    show: false
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    color: "#fff",

                                    rich: {
                                        lg: {
                                            backgroundColor: "#339911",
                                            color: "#fff",
                                            borderRadius: 15,
                                            // padding: 5,
                                            align: "center",
                                            width: 15,
                                            height: 15
                                        }
                                    }
                                }
                            },
                            {
                                show: true,
                                inverse: true,
                                data: valdata,
                                axisLabel: {
                                    textStyle: {
                                        fontSize: 12,
                                        color: "#fff"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "条",
                                type: "bar",
                                yAxisIndex: 0,
                                data: data,
                                barCategoryGap: 50,
                                barWidth: 10,
                                itemStyle: {
                                    normal: {
                                        barBorderRadius: 20,
                                        color: function(params) {
                                            var num = myColor.length;
                                            return myColor[params.dataIndex % num];
                                        }
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: "inside",
                                        formatter: "{c}%"
                                    }
                                }
                            },
                            {
                                name: "框",
                                type: "bar",
                                yAxisIndex: 1,
                                barCategoryGap: 50,
                                data: [100, 100, 100, 100, 100],
                                barWidth: 15,
                                itemStyle: {
                                    normal: {
                                        color: "none",
                                        borderColor: "#00c1de",
                                        borderWidth: 3,
                                        barBorderRadius: 15
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);


                    var option = {
                        tooltip: {
                            trigger: "axis"
                        },
                        legend: {
                            top: "0%",
                            data: ["市场需求", "价格趋势"],
                            textStyle: {
                                color: "rgba(255,255,255,.5)",
                                fontSize: "12"
                            }
                        },

                        grid: {
                            left: "10",
                            top: "30",
                            right: "10",
                            bottom: "10",
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: "category",
                                boundaryGap: false,
                                // x轴更换数据
                                data: [],
                                // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: 12
                                    }
                                },
                                // x轴线的颜色为   rgba(255,255,255,.2)
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.2)"
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: "value",
                                axisTick: { show: false },
                                axisLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: 12
                                    }
                                },
                                // 修改分割线的颜色
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)"
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: "市场需求",
                                type: "line",
                                smooth: true,
                                // 单独修改当前线条的样式
                                lineStyle: {
                                    color: "#0184d5",
                                    width: "2"
                                },
                                // 填充颜色设置
                                areaStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0,
                                        0,
                                        0,
                                        1,
                                        [
                                            {
                                                offset: 0,
                                                color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                                            },
                                            {
                                                offset: 0.8,
                                                color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                                            }
                                        ],
                                        false
                                    ),
                                    shadowColor: "rgba(0, 0, 0, 0.1)"
                                },
                                // 设置拐点
                                symbol: "circle",
                                // 拐点大小
                                symbolSize: 8,
                                // 开始不显示拐点， 鼠标经过显示
                                showSymbol: false,
                                // 设置拐点颜色以及边框
                                itemStyle: {
                                    color: "#0184d5",
                                    borderColor: "rgba(221, 220, 107, .1)",
                                    borderWidth: 12
                                },
                                data: []
                            },
                            {
                                name: "价格趋势",
                                type: "line",
                                smooth: true,
                                lineStyle: {
                                    normal: {
                                        color: "#00d887",
                                        width: 2
                                    }
                                },
                                areaStyle: {
                                    normal: {
                                        color: new echarts.graphic.LinearGradient(
                                            0,
                                            0,
                                            0,
                                            1,
                                            [
                                                {
                                                    offset: 0,
                                                    color: "rgba(0, 216, 135, 0.4)"
                                                },
                                                {
                                                    offset: 0.8,
                                                    color: "rgba(0, 216, 135, 0.1)"
                                                }
                                            ],
                                            false
                                        ),
                                        shadowColor: "rgba(0, 0, 0, 0.1)"
                                    }
                                },
                                // 设置拐点 小圆点
                                symbol: "circle",
                                // 拐点大小
                                symbolSize: 5,
                                // 设置拐点颜色以及边框
                                itemStyle: {
                                    color: "#00d887",
                                    borderColor: "rgba(221, 220, 107, .1)",
                                    borderWidth: 12
                                },
                                // 开始不显示拐点， 鼠标经过显示
                                showSymbol: false,
                                data: []
                            }
                        ]
                    };
                    var markets = []
                    var prices = []
                    var days_right_low_box = []
                    $.ajax({
                        type: "get",
                        url: "/marker_price/all", // 假设按照不同的type发送请求
                        contentType: "application/json",
                        success: function (res) {
                            console.log("=====myChart_right_low_box: =======")
                            // console.log(res);
                            var adas = 1
                            for (var i = 0; i < res.length; i+=10) {
                                markets.push(res[i].market_demand);
                                prices.push(res[i].price_trends);
                                days_right_low_box.push(res[i].day.slice(0, 10));

                            }
                            console.log(markets,prices);
                            myChart_center_low_box.setOption({
                                xAxis: {
                                    data:days_right_low_box
                                },
                                series: [
                                    {
                                        name: "市场需求",
                                        data: markets // 根据按钮类型决定更新的数据
                                    },
                                    {
                                        name: "价格趋势",
                                        data: prices // 根据按钮类型决定更新的数据
                                    },


                                ]
                            });
                        }
                    });
                    myChart_center_low_box.setOption(option);
// 4. 让图表跟随屏幕自动的去适应
                    window.addEventListener("resize", function() {
                        myChart_center_low_box.resize();
                    });


                    var aboption = {
                        legend: {
                            top: "90%",
                            itemWidth: 10,
                            itemHeight: 10,
                            textStyle: {
                                color: "rgba(255,255,255,.5)",
                                fontSize: "12"
                            }
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        // 注意颜色写的位置
                        color: [
                            "#006cff",
                            "#60cda0",
                            "#ed8884",
                            "#ff9f7f",
                            "#0096ff",
                            "#9fe6b8",
                            "#32c5e9",
                            "#1d9dff"
                        ],
                        series: [
                            {
                                name: "点位统计",
                                type: "pie",
                                // 如果radius是百分比则必须加引号
                                radius: ["10%", "70%"],
                                center: ["50%", "42%"],
                                roseType: "radius",
                                data: [
                                    { value: 20, name: "云南" },
                                    { value: 26, name: "北京" },
                                    { value: 24, name: "山东" },
                                    { value: 25, name: "河北" },
                                    { value: 20, name: "江苏" },
                                    { value: 25, name: "浙江" },
                                    { value: 30, name: "深圳" },
                                    { value: 42, name: "广东" }
                                ],
                                // 修饰饼形图文字相关的样式 label对象
                                label: {
                                    fontSize: 10
                                },
                                // 修饰引导线样式
                                labelLine: {
                                    // 连接到图形的线长度
                                    length: 10,
                                    // 连接到文字的线长度
                                    length2: 10
                                }
                            }
                        ]
                    };

                    // 3. 配置项和数据给我们的实例化对象
                    myChart_right_low_box.setOption(aboption);



                }
                if (index === 3) {
                    let isRecording = false;
                    const recognition = new webkitSpeechRecognition() || new SpeechRecognition();
                    recognition.lang = 'zh-CN'; // 设置语音识别语言，可根据需要更改
                    console.log("index===3")

                    recognition.onresult = (event) => {
                        const speechToText = event.results[0][0].transcript;
                        console.log('Speech to text:', speechToText);




                        window.alert('语音识别完成，您说的内容是：' + speechToText);


                    };

                    recognition.start();
                }
            });
        });
    </script>

</section>

</body>
</html>
